<template>
  <div class="company-information">
    <div class="company-information__select">
      <div class="company-information__select-other">
        <el-select v-model="type" size="mini" @change="getData">
            <el-option
              v-for="(item, i) in typeList"
              :key="i"
              :label="item.laber"
              :value="item.value"
              >
            </el-option>
          </el-select>
      </div>
    </div>
    <div class="company-information__chart">
      <ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend" width="95%" height="10rem"></ve-histogram>
      <ve-histogram :data="chartData2" :settings="chartSettings" :extend="chartExtend2" width="95%" height="10rem"></ve-histogram>
    </div>
    <div class="company-information__content">
      <div class="item title">
        <span></span>
        <span>贯标项目数</span>
        <span>对标项目数</span>
        <span>区优项目数</span>
        <span>市优项目数</span>
        <span>省优项目数</span>
        <span>国优项目数</span>
      </div>
      <div v-for="(item,i) in data" :key="i" class="item">
        <span class="cityName">{{item.cityName}}</span>
        <span>{{item.cityGlInfo.f1}}</span>
        <span>{{item.cityGlInfo.f2}}</span>
        <span>{{item.cityGlInfo.f3}}</span>
        <span>{{item.cityGlInfo.f4}}</span>
        <span>{{item.cityGlInfo.f5}}</span>
        <span>{{item.cityGlInfo.f6}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import { getGsxq } from 'src/api/api'
import { formatFontSize } from 'js/utils'
import { Select, Option } from 'element-ui'
import Histogram from 'v-charts/lib/histogram.common'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Histogram.name]: Histogram,
  },
  data() {
    return {
      data: [],
      typeList: [
        {
          laber: '总管理面积',
          value: '1'
        },
        {
          laber: '总管理户数',
          value: '2'
        },
        {
          laber: '总服务人口数',
          value: '3'
        }
      ],
      type: '2',
      chartSettings: {
        legend: {
          show: false
        },
      },
      chartExtend: {
        title: {
          text: '各城市管理情况柱状图',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          right: 0,
          top: 0,
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        xAxis: {
          axisLabel: {
            color: '#8EC7DC',
            fontSize: formatFontSize(0.12),
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 25000,
          splitNumber: 5,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '5%',  
        },
        series: {
          barWidth: 25,
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: 'rgba(255,234,0,0.82)'},
                  {offset: 1, color: 'rgba(144,133,14,0.2)'}
              ]
            ),
          },
        }
      },
      chartExtend2: {
        title: {
          text: '各城市项目数',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          right: 0,
        },
        legend: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        xAxis: {
          axisLabel: {
            color: '#8EC7DC',
            fontSize: formatFontSize(0.12),
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 50,
          splitNumber: 5,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '5%',  
        },
        series: {
          barWidth: 25,
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: 'rgba(69,240,234,0.82)'},
                  {offset: 1, color: 'rgba(10,106,103,0.2)'}
              ]
            ),
          },
        }
      },
      chartData: {
        columns: ['cityName', 'value'],
        rows: []
      },
      chartData2: {
        columns: ['cityName', 'zglxms'],
        rows: []
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {
        type: this.type
      }
      getGsxq(params).then(res=> {
        this.data = res.data
        if(this.type === '1') {
          this.chartData.columns = ['cityName', 'zglmj']
        } else if(this.type === '2') {
          this.chartData.columns = ['cityName', 'zglhs']
        } else if(this.type === '3') {
          this.chartData.columns = ['cityName', 'zfwrks']
        }
        this.chartData.rows = res.data
        this.chartData2.rows = res.data
      })
    }
  },
}
</script>
<style lang="scss">
.company-information {
  padding: 10px 0px 10px;
  &__select {
    // text-align: right;
    // padding: 5px 20px 5px 0;
    // font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 60px;
    margin-bottom: 5px;
    color: #AAECFF;
    .el-select{
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-other {
      .el-select {
        width: 175px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    // height: 150px;
    width: 100%;
    padding-top: 5px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      span {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border: 0.5px solid #6A97AA;
        width: 70px;
        height: 30px;
        font-size: 13px;
        color: #39E4D6;
        text-align: center;
      }
      .cityName {
        font-size: 12px;
        color: #fff;
      }
    }
    .title {
      span {
        width: 80px;
        font-size: 10px;
        color: #6A97AA;
      }
    }
  }
  &__chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: -20px;
  }
}
</style>